<template>
  <div
    :class="prefixCls"
    class="login_bg relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
  >
    <img class="login_left1" src="/src/assets/imgs/login/left1.png" />
    <img class="login_left2" src="/src/assets/imgs/login/left2.png" />
    <div class="login_right">
      <LoginForm class="h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
    </div>
    <Footer class="some" />
  </div>
</template>
<script lang="ts" setup>
import { useDesign } from '@/hooks/web/useDesign'
import Footer from '@/layout/components/Footer/src/Footer.vue'
import { LoginForm } from './components'

defineOptions({ name: 'Login' })

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-login;

.#{$prefix-cls} {
  overflow: auto;

  &__left {
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background-image: url('@/assets/svgs/login-bg.svg');
      background-position: center;
      background-repeat: no-repeat;
      content: '';
    }
  }
}
</style>

<style lang="scss">
.login_bg {
  background-image: url('/src/assets/imgs/login/bg.png'); /* 替换为你的背景图片路径 */
  background-size: cover; /* 确保背景图片始终覆盖整个页面 */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 禁止重复 */
  position: relative;
  .login_left1 {
    width: 224px;
    height: 430px;
    position: absolute;
    left: 15%;
    top: 50%;
    transform: translateY(-100%);
  }
  .login_left2 {
    width: 223px;
    height: 435px;
    position: absolute;
    left: calc(15% + 223px);
    top: 50%;
    transform: translateY(-50%);
  }
}
.login_right {
  width: 449px;
  height: 673px;
  padding: 80px 32px 0 24px;
  background-image: url('/src/assets/imgs/login/right.png');
  background-size: cover; /* 确保背景图片始终覆盖整个页面 */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 禁止重复 */
  position: absolute;
  right: 15%;
  top: 50%;
  transform: translateY(-50%);
  border: none !important;
}
.some {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: transparent;
}
.dark .login-form {
  .el-divider__text {
    background-color: var(--login-bg-color);
  }

  .el-card {
    background-color: var(--login-bg-color);
  }
}
</style>
